<template>
	<view>
		<view style="background: #fff;min-height: 100vh;" v-show="!loadingone">
			<u-navbar :background="background" back-icon-color="#fff">
				<view class="slot-wrap" style="width: 460upx;">
					<!-- <view class="search-wrap" > -->
					<u-search bg-color="#fff" v-model="searchValue" @change="change" @custom="custom" @search="custom"
						shape="round" :clearabled="true" :show-action="false" input-align="left" @clear="clear"
						placeholder="请输入您要搜索的内容" @focus="focus"></u-search>
					<!-- </view> -->
				</view>
			</u-navbar>
			<view v-if="isSearch ==1">
				<view class="planArrView">
					<view class="weui-flex">
						<view class="weui-flex__item">
							<view class="placeholder">
								按科室查
							</view>
						</view>
						<view>
							<view class="placeholder">
								<view class="weui-flex">
									<view class="weui-flex__item">
										<view class="placeholder ranone">
										</view>
									</view>
									<view>
										<view class="placeholder rantwo">
										</view>
									</view>
									<view>
										<view class="placeholder rantwo">
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="viewBody">
					<block v-for="(item,idx) in keArrr" :key="idx">
						<!-- :style="[{background:item.bg,color:item.color}]" -->
						<view class="keView" :class="'bgcolor'+idx" @tap="inquire(item,idx,'ks')">
							<view class="loadImage">
								<u-lazy-load height="40" img-mode="aspectFill" :image="item.departmentIcon">
								</u-lazy-load>
							</view>
							{{item.departmentName}}
						</view>
					</block>
				</view>
				<view class="planArrView">
					<view class="weui-flex">
						<view class="weui-flex__item">
							<view class="placeholder">
								按部位查
							</view>
						</view>
						<view>
							<view class="placeholder">
								<view class="weui-flex">
									<view class="weui-flex__item">
										<view class="placeholder ranone">
										</view>
									</view>
									<view>
										<view class="placeholder rantwo">
										</view>
									</view>
									<view>
										<view class="placeholder rantwo">
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="viewBody">
					<block v-for="(item,idx) in bwArrr" :key="idx">
						<!-- :style="[{background:item.bg,color:item.color}]" -->
						<view class="keView" :class="['bgcolor'+idx,'bgcolora'+idx]" @tap="inquire(item,idx,'bw')">
							<view class="loadImage">
								<u-lazy-load height="40" img-mode="aspectFill" :image="item.positionIcon"></u-lazy-load>
							</view>
							{{item.positionName}}
						</view>
					</block>
				</view>
			</view>
			<!-- <icon type="trash" color="#000" size="26"/> -->
			<view v-if="isSearch ==2">
				<view class="SearchTitle weui-flex">
					<view class="titlel">
						搜索历史
					</view>
					<view class="deleteIcon" @tap="deleteTab()">
						<uni-icons type="trash" :color="true?'#000':'#8f8f94'" size="20" />
					</view>
				</view>
				<block v-for="(item,idx) in HistoryArr" :key="idx">
					<view class="historyView" @tap="clicksc(item,idx,'HistoryArr')">
						{{item.keyword}}
					</view>
				</block>
				<!-- 热门 -->
				<view class="SearchTitle">
					<view class="titlel">
						热门搜索
					</view>
				</view>
				<block v-for="(item,idx) in hotArr" :key="idx">
					<view class="historyView" @tap="clicksc(item,idx,'hotArr')">
						{{item.keyword}}
					</view>
				</block>
			</view>
			<view v-if="isSearch==3">
				<block v-for="(item,idx) in searchto" :key="idx">
					<view class="searchtoView" @tap.stop="clickItem(item)">
						{{item.diseaseName}}
					</view>
					<u-line v-show="idx !=searchto.length-1" />
				</block>
				<view style="height: 200rpx;">

				</view>
				<view class="noData" v-if="searchto.length ==0">
					<view class="noDataicon">

					</view>
					暂无数据
				</view>
			</view>
		</view>
		<!-- 加载 -->
		<view class="loading-box">
			<u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
	</view>

</template>
<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"


	export default {
		components: {
			uNavbar,
			uLazyLoad,
			uLine,
			uLoading,
		},
		data() {
			return {
				pageCurrent: 1, //页数
				pageSize: 10, //加载条数
				loadingone: true,
				searchto: [],
				hotArr: [],
				HistoryArr: [],
				isSearch: 1,
				searchValue: '',
				keArrr: [],
				bwArrr: [],
				background: {
					background: 'url(https://static.bsyjk.cn/health-pg/2E165323C8EE47EC902A95A24679A025.png) no-repeat',
					// 还可以设置背景图size属性
					backgroundSize: 'cover',
				}
			}
		},
		onLoad() {
			this.department(0) //查询科室
			this.listAllBw(0) //根据部位查询
		},
		methods: {
			onReachBottom: function() { //分页加载
				if (this.searchValue != '') {
					this.listPageUser(this.searchValue, this.pageCurrent += 1, this.pageSize, true)
				}
			},
			// 疾病搜索
			listPageUser(keyword, pageCurrent, pageSize, fy) { //关键字 分页  条数  用户id
				let _this = this;
				this.$api.get(global.apiUrls.listPageUser + '?keyword=' + keyword + '&pageCurrent=' + pageCurrent +
						'&pageSize=' + pageSize + '&userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let records = res.data.result.records;
							if (fy) { //分页
								_this.searchto = _this.searchto.concat(records);
							} else {
								_this.searchto = records;
							}
							_this.isSearch = 3
						}
					})
			},
			clicksc(item, idx, type) {
				this.searchValue = item.keyword;
				this.custom()
			},
			// 获取搜索记录
			userDiseaseSearch() {
				// userid  疾病0 饮食 1 页数 条数
				let _this = this;
				this.$api.get(global.apiUrls.userDiseaseSearch + '/' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId +
						'/0/1/10', {})
					.then(res => {
						if (res.data.code == 1000) {
							_this.HistoryArr = res.data.result.records
						}
					})
			},
			hotKeshi(size, type) { //size查询数量   type0疾病 1食材
				let _this = this;
				this.$api.get(global.apiUrls.hotKeshi + '/' + type + '/' + size, {})
					.then(res => {
						let result = res.data.result;
						_this.hotArr = result;
					})
			},
			inquire(item, index, type) {
				console.log(item, index, type)
				uni.navigateTo({
					url: '/pages/subpackage/find/scientifically/scientifically?departmentId=' + item.departmentId +
						'&type=' + type + '&index=' + index + '&level=' + item.level + '&name=' + item
						.departmentName + '&positionId=' + item.positionId + '&positionName=' + item.positionName
				})
			},
			// 根据部位查询
			listAllBw(pid) {
				let _this = this;
				this.loadingone = true; //加载动画
				this.$api.get(global.apiUrls.listAllBw + '?pid=' + pid, {})
					.then(res => {
						console.log(res)
						let result = res.data.result;
						_this.bwArrr = result; //赋值部位
						_this.loadingone = false; //加载动画
					})
			},
			// 根据科室查询
			department(pid) {
				let _this = this;
				this.$api.get(global.apiUrls.department + '?pid=' + pid, {})
					.then(res => {
						console.log(res)
						let result = res.data.result;
						_this.keArrr = result; //赋值部位
					})
			},
			deleteTab(e) {

			},
			clickItem(e) {
				console.log(e)
				uni.navigateTo({
					url: '/pages/subpackage/find/illness/illness?diseaseId=' + e.diseaseId
				})
			},
			focus(e) { //获取焦点
				if (e == '') {
					this.isSearch = 2;
					this.hotKeshi(10, 0) //热门搜索
					this.userDiseaseSearch() //历史搜索
				} else {}
			},
			clear(e) { //删除搜索
				this.isSearch = 1;
			},
			change(e) { //改变
				// if (e == '') {
				// 	this.isSearch = 2;
				// } else {
				// 	this.isSearch = 3;
				// }
			},
			// 用户点击搜索
			custom() {
				this.listPageUser(this.searchValue, this.pageCurrent, this.pageSize)
			}
		}
	}
</script>

<style lang="scss">
	@import "../basescss/basescss.scss";

	.bgcolor0,
	.bgcolor7,
	.bgcolor18,
	.bgcolor15 {
		background: #FFF5F5;
		color: #FF333A;
	}

	.bgcolor1,
	.bgcolor6,
	.bgcolor8,
	.bgcolor16 {
		background: #F8F4FF;
		color: #9013FE;
	}

	.bgcolor2,
	.bgcolor5,
	.bgcolor17 {
		background: #F4FAFF;
		color: #2E97F7;
	}

	.bgcolor3,
	.bgcolor4,
	.bgcolor9,
	.bgcolor14 {
		background: rgba(129, 192, 66, 0.09);
		color: #81C042;
	}

	.bgcolor10 {
		background: rgba(245, 166, 35, 0.09);
		color: rgba(245, 166, 35, 1);
	}

	.bgcolor12 {
		background: rgba(248, 231, 28, 0.09);
		color: rgba(248, 231, 28, 1);
	}

	.bgcolor13 {
		background: rgba(208, 2, 27, 0.09);
		color: rgba(208, 2, 27, 1);
	}

	.bgcolor11 {
		background: rgba(80, 227, 194, 0.09);
		color: rgba(80, 227, 194, 1);
	}

	.bgcolora9 {
		background: #FFF5F5;
		color: #FF333A;
	}

	.viewBody {
		width: 750upx;
		margin: 0 auto;
	}

	.keView {
		display: inline-block;
		width: 155upx;
		height: 162upx;
		border-radius: 20upx;
		margin: 0 0 30upx 28upx;
		text-align: center;
	}

	.loadImage {
		width: 40upx;
		height: 40upx;
		margin: 40upx auto 10upx;
	}

	.SearchTitle {
		width: 710upx;
		margin: 0 auto;
		height: 105upx;
		line-height: 105upx;
		font-size: 28upx;
		font-weight: 400;
		color: #000000;
	}

	.titlel {
		width: 660upx;
	}

	.historyView {
		display: inline-block;
		padding: 14upx 44upx;
		background: #F9F9F9;
		margin: 0 0 20upx 20upx;
		border-radius: 35upx;
		color: #6E6E6E;
	}

	.searchtoView {
		width: 750upx;
		height: 170upx;
		font-size: 28upx;
		font-weight: 500;
		color: #333333;
		line-height: 170upx;
		padding: 0 24upx;
		border-bottom: 1px solid #f5f5f5;
		position: relative;
	}

	.searchtoView::before {
		content: '';
		width: 30upx;
		height: 36upx;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 30upx;
		background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 30upx 36upx;
	}
	.noData {
		font-size: 30upx;
		font-weight: 500;
		color: #9B9B9B;
		line-height: 42upx;
		text-align: center;

		.noDataicon {
			width: 213upx;
			height: 209upx;
			background: url(https://bsyjk-pic.bsyjk.cn/empty/EFF804A9156249AD920DEF9CC805EFC7.png)no-repeat;
			background-size: 213upx 209upx;
			margin: 400upx auto 30upx;
		}
	}
</style>
